---
import '../fonts/font-face.css';
import '../tailwind.css';
import './loadingSpinner.css';
const { title, theme = 'light' } = Astro.props;
---

<html data-theme={theme}>
  <head>
    <title>{title ?? 'TypeGPU'}</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="/TypeGPU/favicon.svg" />
    <link rel="sitemap" href="/TypeGPU/sitemap-index.xml" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&family=Reddit+Mono&display=swap" rel="stylesheet">
    <script is:inline src="/TypeGPU/coi-serviceworker.js"></script>
    <style is:global>
      .bg-blurred-radial-purple {
        background: radial-gradient(closest-side, #f5f2fe, #5f25f100);
      }

      .bg-blurred-radial-tameplum {
        background: radial-gradient(closest-side, #efeff9, #5f25f100);
      }

      .monaco-editor,
      .overflow-guard {
        border-radius: 0 0.5rem 0.5rem 0.5rem;
      }
      @reference "../tailwind.css";
      @layer base {
        h1 {
          @apply m-0 lg:text-[3.25rem] md:text-[2.5rem] text-[1.4375rem] leading-[130%];
        }

        h2 {
          @apply m-0 lg:text-[3rem] md:text-[2.125rem] text-[1.375rem] leading-[130%];
        }

        h3 {
          @apply m-0 lg:text-[2.125rem] md:text-[1.5rem] text-[1.25rem] leading-[140%];
        }

        p {
          @apply m-0 lg:text-[1.5rem] md:text-[1.25rem] text-[1rem] leading-[150%];
        }

        .text-micro {
          @apply lg:text-[1rem] md:text-[0.875rem] text-[0.75rem] leading-[160%];
        }
      }

      body {
        margin: 0;
      }

      [data-theme='dark'] body {
        background-color: #171724;
        color: white;
      }

      [data-theme='light'] body {
        background-color: white;
      }

      input[type='color']::-webkit-color-swatch {
        border: none;
      }

      input[type='color']::-moz-color-swatch {
        border: none;
      }
    </style>
  </head>
  <body>
    <slot />
  </body>
</html>
